<template>
  <header class="searchs">
    <div class="title">
      <section class="m-search-book">
        <router-link to="/" class="left">
          <span class="ui-leftaw-2"></span>
        </router-link>
        <div class="search-input">
          <div class="sech">
            <div class="inner">
              <button @click="getkeyword"></button>
              <input
                placeholder="唐诗里的烟火人间"
                @keydown.enter="getkeyword"
                @input="getlist"
              />
            </div>
            <router-link to="/home" class="home">首页</router-link>
          </div>
        </div>
        <div class="timelist" v-show="shows">
          <ul id="J_SearchOps" style="">
            <li class="hasimg" v-for="(item, x) in serchlist" v-if="x <= 0">
              <router-link :to="`/cs?id=${item.id }&title=${item.text }`"
                ><img :src="item.cover" />
                <h3>{{ item.text }}</h3>
                <p>{{ item.author }}</p>
                <p class="desc">{{ item.d }}</p></router-link
              >
            </li>
            <li class="children" v-for="(item, x) in serchlist" v-if="x > 0">
              <router-link :to="`/cs?id=${item.id }&title=${item.text }`"><em></em>{{ item.text }}</router-link>
            </li>
          </ul>
        </div>
      </section>
    </div>
    <loading v-if="isLoading"></loading>
    <div class="modo-body"  @mousewheel="moveos">
      <div class="booklist">
        <ul>
          <li v-for="item in searchdata">
            <router-link :to="`/cs?id=${item.bookId }&title=${item.title  }`">
              <div class="book-1">
                <img :src="item.cover" alt="" />
              </div>
              <div class="text-1">
                <h4>{{ item.title }}</h4>
                <p class="name-1">{{ item.author }}|<span>{{item.category}}</span></p>
                <p class="p-1">简介:{{ item.summary }}</p>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>
<script>
import Loading from "@/components/loading/index.vue";
import { serchlistFunc, serchFunc } from "@/request/index";
export default {
  data() {
    return {
      kework: this.$route.query.keword,
      searchdata: [],
      serchlist: [],
      shows: false,
      isLoading: true,
    };
  },
  components: { Loading },
  methods: {
    async csfe() {
      await serchFunc(this.kework).then((res) => {
        document.querySelector("input").value = this.kework;
        // console.log(res);
        let bookdata = res.data.books;
        // console.log(bookdata);
        this.searchdata = bookdata.map((item) => {
          // console.log(item)
          return item;
        });
        // console.log(this.searchdata)
        this.isLoading = false;
      }).catch(err => {
          console.log("请求失败...");
        });
    },
    getkeyword() {
      let kework = document.querySelector("input").value;
      if (kework !== "") {
        // console.log(kework);
        this.$router.push(`/searchlist?keword=${kework}`);
        this.$router.go(0);
      } else {
        window.alert("请输入内容后搜索");
      }
    },
    getlist() {
      let kework = document.querySelector("input").value;
      // console.log()
      if (kework !== ""||kework !== undefined || kework !== null) {
        serchlistFunc(document.querySelector("input").value).then((res) => {
          console.log();
          let boolist = res.words.w;
            this.serchlist = boolist;
            // console.log(this.serchlist);
          if (this.serchlist!== undefined ) {
            this.shows = true;
          } else if(this.serchlist === undefined){
            this.shows = false;
          }
        }).catch(err => {
          console.log("请求失败...");
        });
      }
    },
    moveos(e){
      if(e.deltaY>-450){
        // console.log("cg")
        this.shows  = false;
      }
    }
  },
  created() {
    this.csfe();
  },
};
</script>
<style lang="scss">
@import url(../static/css/reset.css);
.searchs {
  width: 100%;
  .title {
    position: relative;
    height: 44px;
    line-height: 44px;
    min-width: 256px;
    background-color: black;
    a.left {
      float: left;
      font-size: 14px;
      position: relative;
      .ui-leftaw-2 {
        display: inline-block;
        margin-bottom: 3px;
        margin-left: 15px;
        margin-right: 15px;
        vertical-align: middle;
        width: 10px;
        height: 18px;
        background: url(../static/imgs/arrow-left.png);
        background-size: 100% 100%;
      }
    }
    .search-input {
      margin-left: 40px;
      padding: 8px 15px 8px 0;
      box-sizing: border-box;
      min-width: 256px;
      .inner {
        position: relative;
        width: 85%;
        button {
          width: 51px;
          height: 28px;
          border: none;
          vertical-align: middle;
          background: url(../static/imgs/search.png);
          background-size: cover;
          background-repeat: no-repeat;
          position: absolute;
          top: 0;
          right: 0;
        }
        input {
          border: none;
          height: 28px;
          line-height: 28px;
          font-size: 12px;
          vertical-align: middle;
          float: left;
          box-sizing: border-box;
          color: #6c6358;
          background: #fff;
          border-radius: 14px;
          width: 100%;
          padding: 0 51px 0 15px;
        }
      }
      a.home {
        float: left;
        width: 15%;
        height: 28px;
        line-height: 28px;
        color: #fff;
        font-size: 15px;
        padding: 0;
        text-align: right;
      }
    }
    .timelist {
      ul {
        overflow-y: scroll;
        top: 60px;
        left: 0;
        right: 0;
        clear: both;
        background-color: #fff;
        padding-left: 15px;
        height: 450px;
        li {
          &.hasimg {
            height: 70px;
            padding: 10px 50px 10px 0;
            border-bottom: #ededed solid 1px;
            img {
              float: left;
              margin: 0 10px 0 0;
              width: 53px;
              height: 70px;
            }
            h3 {
              font-size: 16px;
              line-height: 18px;
              height: 18px;
              overflow: hidden;
              word-break: break-all;
              font-weight: normal;
              color: #6c6358;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding-bottom: 2px;
            }
            p {
              font-size: 12px;
              margin-top: 4px;
              color: #aba59a;
              line-height: 16px;
              height: 16px;
              overflow: hidden;
              &.desc {
                font-size: 13px;
                color: #807a73;
                height: 32px;
                line-height: 16px;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
          &.children {
            height: 50px;
            line-height: 50px;
            border-bottom: #ededed solid 1px;
            font-size: 16px;
            color: #6c6358;
            padding-right: 50px;
            a {
              display: block;
              height: 100%;
              color: #777;
              position: relative;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            em {
              background: url(../static/imgs/search-list.png) center center
                no-repeat;
              width: 14px;
              height: 14px;
              background-size: contain;
              float: left;
              margin: 17px 5px 0 0;
            }
          }
        }
      }
    }
  }
  .booklist {
    width: 100%;
    // background: black;
    ul {
      li {
        margin-top: 5px;
        box-sizing: border-box;
        border-bottom: 1px solid #dcdcdc;
        clear: both;
        [class^="book"] {
          width: 93px;
          margin: 9px;
          float: left;
          clear: both;
          img {
            width: 94px;
            height: 131.6px;
            border-radius: 5px;
          }
        }
        [class^="text"] {
          display: block;
          height: 150px;
          padding-top: 10px;
          color: #333;
          outline: none;
          padding-left: 10px;
          h4 {
            font-size: 15px;
            line-height: 19px;
            height: 38px;
            max-height: 38px;
          }
          [class^="name"] {
            color: #888;
            line-height: 15px;
            height: 15px;
            font-size: 12px;
            margin-bottom: 5px;
            -webkit-line-clamp: 2;
            overflow: hidden;
            span {
              margin-left: 2px;
            }
          }
          [class^="p"] {
            color: #888;
            line-height: 18px;
            height: 36px;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>